<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>品牌列表案例</title>
    <script src="lib/vue-2.4.0.js"></script>
    <link href="lib/bootstrap-3.3.7.css" type="text/css" rel="stylesheet">
</head>
<body>


    <div id="app">

        <!-- 面板 -->
       <div class="panel panel-primary">
           <!-- 面板头部 -->
           <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
           </div>

           <!-- 主体-->
           <div class="panel-body form-inline">
                <label>
                    ID:   <input type="text" class="form-control"v-model="id">
                </label>

                <label>
                    Name:   <input type="text" class="form-control"v-model="name">
                </label>

                <input type="button" value="添加" class="btn btn-parimary"@click="add()">

                <label>
                    搜索关键字：<input type="text" class="form-control">

                </label>
           </div>
       </div>


       <!-- 表格 -->

       <table class="table table-bordered table-hover table-striped">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>


            <tr v-for="item in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td><a href="#"@click="">删除</a></td>
            </tr>


       </table>



    </div>

    <script>
     
     var vm =new Vue({

        el:"#app",

        data:{

           list:[
               {id:1,name:"斯卡哈",ctime:new Date()},

               {id:2,name:"永远的",ctime:new Date()},
           ]

        },

        methods:{
            add(){
                var char={id:this.id,name:this.name,ctime:Date()}
                this.list.push(car)
                this.id=this.name=''
            },
del(id){
    var index=this.list.findIndex(item=>{
        if(item.id==id){
            return turn;
        }
    })
    this.list.splice(index,1)

}

        }


      })    
        
        
    </script>
    
</body>
</html>